<template>
  <view class="history-chat">
    <!-- <uv-navbar bgColor="transparent" title="历史聊天" @leftClick="back">
    </uv-navbar> -->
    <view class="empty" v-if="list.length === 0">
      <view class="empty-container">
        <uv-image
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/chat-icon.svg"
          mode="aspectFit"
          :fade="false"
          width="80"
          height="80"
        ></uv-image>
        <uv-text
          align="center"
          size="14"
          color="#999999"
          text="暂无聊天"
          :custom-style="{ padding: '20px 0 60px' }"
        ></uv-text>
        <uv-image
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/chat-btn.svg"
          mode="aspectFit"
          :fade="false"
          width="110"
          height="40"
          @click="toPage('/pages/accompanying/index')"
        ></uv-image>
      </view>
    </view>
    <view class="lists" v-else>
      <view class="list" v-for="(item, index) in list" :key="item.id">
        <uv-swipe-action>
          <uv-swipe-action-item :options="options" @click="del(item.id, index)">
            <view class="mask"></view>
            <view class="content" @click="toChat(item.rbRobot)">
              <uv-avatar size="50" :src="item.rbRobot.avatar_image"></uv-avatar>
              <view class="right">
                <uv-text
                  size="14"
                  color="#333333"
                  :text="item.rbRobot.nickname"
                ></uv-text>
                <view class="txt">
                  <view class="ellipsis" v-html="item.lastMsg.msg"></view>
                  <!-- <uv-text size="12" lines="1" color="#999999"
                                        :text="item.lastMsg.msg"></uv-text> -->
                  <!-- <uv-image src="/src/static/mine/chat-unread.svg" mode="aspectFit" :fade="false"
                                        width="5" height="5"></uv-image> -->
                </view>
              </view>
            </view>
          </uv-swipe-action-item>
        </uv-swipe-action>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { interpreter } from "@/api/request";
import debounce from "@/utils/debounce";
import { historyChatList, historyChatDel } from "@/api/chat";
import { onMounted, ref } from "vue";

interface List {
  id: any; //Number as () => any
  rb_robot_id: any; //Number as () => any
  rbRobot: {
    id: string;
    avatar_image: string;
    nickname: string;
    type: number;
  };
  lastMsg: {
    msg: string;
  };
}
const list = ref<List[]>([]);
const options = ref([
  {
    icon: "trash-fill",
    style: {
      backgroundColor: "#333333",
      width: "30px",
      height: "30px",
      borderRadius: "50%",
      margin: "0 6px"
    }
  }
]);

async function getList() {
  const [err, res] = await interpreter(historyChatList());
  if (!err) {
    list.value = res;
  }
}

const del = debounce((id: number, index: number) => {
  uni.showModal({
    title: "提示",
    content: "删除后无法恢复",
    async success(res) {
      if (res.confirm) {
        const [err] = await interpreter(historyChatDel([id]));
        if (!err) {
          uni.showToast({
            title: "删除成功",
            icon: "none"
          });
          list.value.splice(index, 1);
        }
      }
    }
  });
});
function back() {
  uni.navigateBack({ delta: 1 });
}
function toPage(url: string) {
  uni.switchTab({ url });
}
function toChat(rbRobot: List["rbRobot"]) {
  if (rbRobot.type === 1) {
    uni.navigateTo({
      url: `/pages/lawer/lawer`
    });
  }
  if (rbRobot.type === 2) {
    uni.navigateTo({
      url: `/pages/index/index?id=${rbRobot.id}`
    });
  }
}
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.history-chat {
  height: 100vh;
  // background: var(--bg-color);
  background-color: #f9f9f9;

  .uv-navbar {
    height: 44px;
  }

  .empty {
    height: calc(100vh - 44px);
    // margin-top: 44px;

    &-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 80px;
    }
  }

  .lists {
    height: calc(100vh - 64px);
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;
    //padding: 20px;
    //border-radius: 20px;

    .list {
      position: relative;
      // display: flex;
      // align-items: center;
      margin-bottom: 15px;
      padding: 10px;
      background-color: #fff;
      border-radius: 10px;

      .mask {
        height: 50px;
        background-color: #fff;
      }

      ::v-deep.uv-swipe-action-item__content {
        background-color: transparent;
      }

      // ::v-deep.uv-swipe-action-item__right{
      //     opacity: 0;
      // }

      .content {
        position: absolute;
        display: flex;

        .right {
          margin-left: 10px;

          .txt {
            display: flex;
            align-items: center;
            margin-top: 4px;

            .ellipsis {
              width: 440rpx;
              font-size: 12px;
              color: #666;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
